<template>
  <el-table :data="treeData" border style="flex:1" row-key="id" :row-style="getRowStyle">
    <el-table-column :prop="treeProp" :label="treeLabel">
      <template slot-scope="scope">
        <span :style="'padding-left: ' + (scope.row[levelProp] * indentSize) + 'px;'">
          <template v-if="scope.row[leafProp]==0">
            <i
              :class="['fa',!scope.row.expanded ? 'fa-plus-square' : 'fa-minus-square']"
              style="font-size:16px;width:20px;"
              @click="collsop(scope.row)"
            ></i>
          </template>
          <span>{{scope.row[treeProp]}}</span>
        </span>
      </template>
    </el-table-column>
    <el-table-column
      v-for="(c,index) in columns"
      :key="index"
      :prop="c.prop"
      :label="c.label"
      :width="c.width"
      :fixed="c.fixed"
      :formatter="c.formatter"
    ></el-table-column>
    <el-table-column fixed="right" label="操作" width="150">
      <template slot-scope="scope">
        <el-button
          v-for="btn in optionBtns"
          :key="btn.code"
          @click="optionHandler(btn.code,scope.row)"
          type="text"
          size="small"
        >{{btn.text}}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    indentSize: {
      type: Number,
      default: 20
    },
    levelProp: {
      type: String,
      default: "level"
    },
    leafProp: {
      type: String,
      default: "leaf"
    },
    treeLabel: {
      type: String,
      default: ""
    },
    treeProp: {
      type: String,
      default: ""
    },
    url: {
      type: String,
      default: ""
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    optionBtns: {
      type: Array,
      default() {
        return [];
      }
    },
    expandAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeData: []
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    getRowStyle({ row, rowIndex }) {
      if (row.hidden) {
        return { display: "none" };
      }
      return {};
    },
    collsop(row) {
      let me = this;
      this.$set(row, "expanded", !row.expanded);
      let childs = this.treeData
        .filter(data => {
          return data.parentId == row.id;
        })
        .forEach(data => {
          data.hidden = !row.expanded;
        });
    },
    optionHandler(code, row) {
      this.$emit("option-handler", code, row);
    },
    loadData() {
      let me = this;
      me.$http.ajax({
        url: me.url,
        success(res) {
          res &&
            res.forEach(item => {
              if (item.id != 1) {
                me.setExpanded(item);
              } else {
                item.expanded = true;
              }
            });
          me.treeData = res;
        }
      });
    },
    setExpanded(res) {
      let me = this;
      let children = me.treeData.filter(data => {
        return data.parentId == res.id;
      });
      if (children && children.length > 0) {
        res.expanded = false;
        children.forEach(item => {
          me.setExpanded(item);
        });
      } else {
        if (res.level > 2) {
          res.hidden = true;
        }
      }
    }
  }
};
</script>

<style>
</style>
